<template>
  <li v-on:click="toggleLayerVisibility(layer.name)">
    <div
      class="layer-color"
      v-bind:style="{
        'background-color': getLayerColor(layer.name),
        visibility: visibility
      }"
    ></div>
    <div class="layer-name">
      {{ layer.name }}
    </div>
    <div class="layer-zoom-range">{{ zoomRange }}</div>
  </li>
</template>

<script>
import { map } from "@/globals/map";

export default {
  name: "MapLayerRow",
  props: {
    layer: Object
  },
  computed: {
    zoomRange() {
      return "z" + this.layer.minzoom + "-" + this.layer.maxzoom;
    }
  },
  data() {
    return {
      visibility: "visible"
    };
  },
  methods: {
    // toggleLayerVisibility will toggle a layers visibility between on and off
    toggleLayerVisibility(layerName) {
      var visibility = map.getLayoutProperty(layerName, "visibility");
      if (visibility === "visible") {
        map.setLayoutProperty(layerName, "visibility", "none");
        this.visibility = "hidden";
      } else {
        map.setLayoutProperty(layerName, "visibility", "visible");
        this.visibility = "visible";
      }
    },

    // getLayerColor returns the color of a layer in hex value. this method
    // uses mapbox's getPaintProperty. a different paint property is used
    // for each layer type: circle, line, fill.
    getLayerColor(layerName) {
      let paintPropName;

      let layer = map.getLayer(layerName);
      switch (layer.type) {
        case "fill":
          paintPropName = "fill-outline-color";
          break;
        case "line":
          paintPropName = "line-color";
          break;
        case "circle":
          paintPropName = "circle-color";
          break;
        default:
          console.log("unsupported layer type: " + layer.type);
      }

      if (!paintPropName) {
        return "#000";
      }

      return map.getPaintProperty(layerName, paintPropName);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
li {
  list-style: none;
  padding: 10px;
  border-radius: 3px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
  border-bottom: 1px solid #000;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
}
li:hover {
  color: #fff;
  background-color: #60bb1b10;
}

.layer-color {
  flex: 0 1 0.25em;
  height: 1.1em;
  display: inline-block;
  border-radius: 0.5em;
  border: 1px;
}

.layer-name {
  flex: 1 1 auto;
  overflow: hidden;
  padding: 0 0.5em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-zoom-range {
  flex: 0 1 10%;
  height: 1em;
  border-radius: 0.5em;
  border: 1px;
  padding: 2px 3px;
  font-size: 12px;
  background-color: rgba(74, 73, 73, 0.25);
  float: right;
}
</style>
